<script lang="ts">
	import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import { createEventDispatcher } from 'svelte';
	import { Divider } from '$components/basic';
	import Tab, { Label as TabLabel } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import Textfield from '@smui/textfield';
	import Checkbox from '@smui/checkbox';
	import { shallowClone } from '$utils/clone';
	import { alova } from '$utils/request';
	import { createMessage } from '$components/basic/message';
	import Select, { Option } from '@smui/select';

	const dispatcher = createEventDispatcher();

	let open = false;
	let list = [];

	export let title = 'Edit Address';
	export function init(name, item) {
		title = name;

		open = true;
	}

	const webType = import.meta.env.VITE_WEB_TYPE;
	const dataArray = [
		{ span: 24, type: 'upload', label: 'Avatar: ', value: 'avatar' },
		{ span: 24, type: 'text', label: 'Realname: ', value: 'realname' },
		{ span: 24, type: 'text', label: 'Company: ', value: 'company' },
		{ span: 24, type: 'text', label: 'Job: ', value: 'job' },
		{ span: 24, type: 'text', label: 'Name: ', value: 'name' },
		{ span: 24, type: 'text', label: 'Tel: ', value: 'tel' },
		{ span: 24, type: 'text', label: 'TaxCode: ', value: 'tax' },
		{ span: 24, type: 'text', label: 'Website: ', value: 'website' },
		{ span: 24, type: 'text', label: 'Source: ', value: 'source' },
		{ span: 24, type: 'text', label: 'Allow Note: ', value: 'allowNote' }
	];
	if (webType === 1) dataArray.push({ span: 24, type: 'text', label: 'OpenID: ', value: 'openid' });

	const getDefault = () =>
		dataArray.reduce((acc, item) => {
			return { ...acc, [item.value]: item.type === 'checkbox' ? false : '' };
		}, {});

	export let info = getDefault();

	const on_confirm = async () => {
		// return console.log(info);
		await alova.Post('/member/edit', info);
		// await dispatcher('refresh');

		createMessage({
			type: 'success',
			message: title.charAt(0) === 'A' ? 'Add Success' : 'Edit success',
			duration: 2000
		});
	};
	const on_cancel = () => (info = getDefault());
</script>

<Dialog
	bind:open
	aria-labelledby="simple-title"
	aria-describedby="simple-content"
	container$class="items-start!"
	surface$class="max-w-100% mt-200px"
>
	<Title id="simple-title">{title}</Title>

	<Content id="simple-content">
		<form class="w-full grid grid-cols-24 gap-8px">
			{#each dataArray as item}
				<div class="flex flex-row items-center" style={'grid-column: span ' + item.span}>
					<div class="min-w-120px">{item.label}</div>
					{#if item.type === 'text'}
						<Textfield
							type="text"
							class="min-w-300px"
							variant="outline"
							bind:value={info[item.value]}
						/>
					{:else if item.type === 'upload'}
						<div
							class="w-60px h-60px bg-gray-3 rounded-md overflow-hidden hover:bg-gray-2 active:bg-gray-4"
						>
							<input type="file" class="w-full h-full opacity-0" on:change={() => {}} />
						</div>
					{/if}
				</div>
			{/each}
		</form>
	</Content>
	<Actions>
		<Button on:click={on_confirm} variant="raised" use={[InitialFocus]}>
			<Label>save</Label>
		</Button>
	</Actions>
</Dialog>
